<template>
	<view class="vh_100">
	<view :class="['vh100',{'dark':theme == 'dark'}]">
		        <!-- 语言选择 -->
				<!-- <view @click="funsItemClick(7)">

				  <view class="flex itemLeft">
				    <view class="size30" style="position: absolute;top: 10vw;right: 0;left: 80vw;color: #ffffff;">{{$t('bico.W518')}}</view>
				  </view>
				</view> -->

		<view class="pt30">
			<view class="tc">

				<view class="tc_100">
					<image src="../../static/logo.png" mode="widthFix" class="wt80_100"></image>
				</view>
			</view>

			<view class="wrap">
					<u-row gutter="16">
						<u-col span="3">
							<view class=""></view>
						</u-col>
						<u-col span="3">
							<view class="bg-purple" :class="{'blue2':loginActive==0}" @tap="loginActive=0;">
								{{$t('login').l_mobile}}
							</view>
						</u-col>
						<u-col span="3">
							<view class="bg-purple" :class="{'blue2':loginActive==1}" @tap="loginActive=1;">
								{{$t('login').l_email}}
							</view>
						</u-col>
						<u-col span="3">
							<view class=""></view>
						</u-col>
					</u-row>
			</view>
			<!-- <view class="spdiao"></view> -->
			<view class="mt20 plr10">

				<view class="mt20 plr10 ptb10 radius5 bgHeader">
					<view class="flex alcenter bdb_myblue mb10 ">

						<view class="flex alcenter flex1">
							<input type="text"  v-model="user_string" class="h40 lh40  flex1 input-uni" v-if="loginActive==1" :placeholder="$t('login').p_email">
							<input type="digit" v-model="user_string" class="h40 lh40  flex1 input-uni" v-else :placeholder="$t('login').p_mobile">
						</view>
					</view>
					<view class="mb10">
						<view class="flex bgwhite alcenter bdb_myblue ">
							<input type="text" password="" v-model="password" @input="passwordInput" class="h40 lh40 flex1 input-uni" :placeholder="$t('login').p_pwd">
						</view>

					</view>
					<view class="flex bgwhite alcenter bdb_myblue mb10" v-if="false && isShowCode">
						<input type="text"  v-model="code" class="h40 lh40 flex1 input-uni" :placeholder="$t('login').p_vcode">
						<view class="ml10 plr10 white bgBlue ptb5 radius4" @tap="getCode">
							<text v-if="!hasSend">{{$t('login').get_code}}</text>
							<text v-else>{{second}}s</text>
						</view>
					</view>



					<!-- <view class="mt15 flex alcenter">
						<switch value="cb" :checked="isRemember"  @tap="tapChecked" style="transform:scale(0.8);color:'#1881d2'"/>
						<text class="mbwjmm">{{$t('login').rem_pwd}}</text>
					</view> -->

					<view class="mt222 bgBlue radius5 ptb10 white ft14 tc mb10 lin" @tap="login">{{$t('login').login}}</view>

				    <navigator url="/register" style="background: #00b89700;color: #8495f7;border: 1px solid #8495f7;font-size: 4vw;border-radius: 8px;line-height: 2.8;margin-top: 6vw;text-align: center;">{{$t('login').register}}</navigator>

				    <navigator url="/pages/forgetPwd/forgetPwd" style="background: #00b89700;color: #8495f7;border: 1px solid #8495f7;font-size: 4vw;border-radius: 8px;line-height: 2.8;margin-top: 6vw;text-align: center;">{{$t('login').forget_pwd}}</navigator>
				    <!--  #ifdef H5 -->
					<navigator @click="downloadApp()" style="background: #00b89700;color: #8495f7;border: 1px solid #8495f7;font-size: 4vw;border-radius: 8px;line-height: 2.8;margin-top: 6vw;text-align: center;">{{$t('bico.W799')}}</navigator>
					<!--  #endif -->
					<navigator @click="gocontact()" style="background: #00b89700;color: #8495f7;border: 1px solid #8495f7;font-size: 4vw;border-radius: 8px;line-height: 2.8;margin-top: 6vw;text-align: center;">{{$t('bico.kefu')}}</navigator>
					
					<navigator @click="funsItemClick(7)" style="background: #00b89700;color: #8495f7;border: 1px solid #8495f7;font-size: 4vw;border-radius: 8px;line-height: 2.8;margin-top: 6vw;text-align: center;">{{$t('bico.W518')}}</navigator>
				</view>

			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {mapState,mapActions,mapGetters} from 'vuex';
	import country from '@/common/country.js'
    import {login,commonPhoneCode,commonContact} from '@/common/apiString.js'
	import {myMixins} from '@/common/myMixins.js'
	export default{
		mixins:[myMixins],
		data(){
			return {
				loginActive:0,
				user_string:'',
				password:'',
				re_password:'',
				code:'',
				array: country,
				index: 0,
				area_code:'+86',
				hasSend:false,
				second:60,
				isRemember:false,
				verifyPwd:false,
				isShowCode:false,
				timeInterval:'',
				lang:''
			}
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		mounted() {
		    //this.getPhone();
		},
		onLoad() {
			this.$utils.setTheme(this.theme);
			uni.setNavigationBarTitle({
				title:this.$t('login').login
			})
			 this.contact()
			if(uni.getStorageSync('isRemember')==0){
				this.isRemember=false;
			}else{
				this.isRemember=true;
				this.user_string= uni.getStorageSync('userString');
				this.password=uni.getStorageSync('userPwd');
			}
			this.lang=uni.getStorageSync('lang');
			// this.$utils.getGlobalSettting({url:'env.json'},res=>{
			// 	console.log('aaaaaaa', res);
			// 	uni.setStorageSync('socketPort',res.socket_io_port)
			// 	uni.setStorageSync('smcode',res.login_need_smscode)
			// 	this.isShowCode=res.login_need_smscode;
			// })

		},
		methods:{
			contact() {
				      this.$utils.initData({
				        url: commonContact,
				        type: 'post'
				      }, (res, msg) => {
				        //uni.stopPullDownRefresh();
				        this.mycontact = res
				      })
				    },
			      gocontact(){
				      // #ifdef APP
				      //移动端
				      plus.runtime.openURL(this.mycontact)
				      // #endif
				      //#ifdef H5
				      //window.location.href = this.mycontact;
				      //window.open(this.mycontact, '_blank');
				      this.$utils.openoutherurl(this.mycontact);
				      
					  //#endif
				    },
			downloadApp(){
				this.$utils.downloadApp(this.$utils.initData)
			},
			// 区号选择
			bindPickerChange(e){
				this.index=e.target.value;
				this.phoneItem=this.array[this.index];
				this.area_code=this.phoneItem.code;
				this.nationality=this.phoneItem.area;
			},
			//获取手机前缀
			getPhone(){
			    this.$utils.initData({url:commonPhoneCode,type:'POST'},(res,msg)=>{
					this.array=res;
			        this.phoneItem=res[0];
			    })
			},
			//路由开始
			funsItemClick(index){
				if(index==7){
				  uni.navigateTo({
				    url:'/pages/mine/lang'//语言选择
				  })
				};
			},
			// 获取验证码
			getCode(){
				if(this.timeInterval) return;
				if(this.loginActive==0){
					if(!this.user_string){
						return this.$utils.showLayer(this.$t('login').p_taccount)
					}
					this.$utils.initData({url:'sms_send',type:'POST',data:{user_string:this.user_string,scene:'login',country_code:this.area_code,lang:this.lang}},(res,msg)=>{
						// this.$utils.showLayer(msg);
						setTimeout(()=>{
							this.$utils.showLayer(msg);
						},100)
						this.hasSend=true;
						this.timeInterval=setInterval(()=>{
							if(this.second>=1){
								this.second--;
							}else{
								this.hasSend=false
								clearInterval(this.timeInterval);
							}
						},1000)
					})
				}else{
					if(!this.$utils.checkEmail(this.user_string)){
						return this.$utils.showLayer(this.$t('login').p_email)
					}
					this.$utils.initData({url:'sms_mail',type:'POST',data:{user_string:this.user_string,scene:'login',lang:this.lang}},(res,msg)=>{
						// this.$utils.showLayer(msg);
						setTimeout(()=>{
							this.$utils.showLayer(msg);
						},100)
						this.hasSend=true;
						this.timeInterval=setInterval(()=>{
							if(this.second>=1){
								this.second--;
							}else{
								this.hasSend=false
								clearInterval(this.timeInterval);
							}
						},1000)
					})
				}
			},
			// 是否选中记住密码
			tapChecked(){
				this.isRemember=!this.isRemember;
				if(this.isRemember){
					uni.setStorageSync('isRemember',1)
				}else{
					uni.setStorageSync('isRemember',0)
				}
			},
			// 密码框输入判断提示
			passwordInput(e){
				this.hasSend=false;
				if(e.target.value.length<6){
					this.verifyPwd=true;
				}else{
					this.verifyPwd=false;
				}
			},
			login(){
				if(this.loginActive==1){
					// 邮箱登录
					if(!this.$utils.checkEmail(this.user_string)){
						return this.$utils.showLayer(this.$t('login').p_temail)
					}
				}else{
					if(!this.user_string){
						return this.$utils.showLayer(this.$t('login').p_taccount)
					}
				}
				if(!this.password){
					return this.$utils.showLayer(this.$t('login').p_pwd)
				}
				if(this.password.length<6){
					return this.$utils.showLayer(this.$t('login').p_pwderr)
				}
				// if(this.isShowCode&& !this.code){
				// 	return this.$utils.showLayer(this.$t('login').p_vcode)
				// }
				var data={
					account: this.user_string,
                    password: this.password,
					sms_code: this.code,
					lang:this.lang
				}
				if(this.loginActive==0){
					// 手机登录
					data.country_code=this.area_code;
				}
				this.$utils.initData({url:login,data,type:'POST'},(res,msg)=>{
					uni.setStorageSync('token',res.token);
					// this.$utils.showLayer(this.$t('login').l_success);
					setTimeout(()=>{
						this.$utils.showLayer(this.$t('login').l_success);
					},100)
					if(this.isRemember){
						uni.setStorageSync('userString',this.user_string);
						uni.setStorageSync('userPwd',this.password);
					}
					setTimeout(() => {
						uni.reLaunch({
							url:'/pages/index/index'
						})
					}, 1500);
				})
			},

		}
	}
</script>

<style>
.vh_100 {
	padding: 0vw 0 0 0;
	background: linear-gradient(-45deg, #0d25a9, #1a31a9, #0d2296, #0f2394);
	height: 300px;
	background-size: 100%;
}
.mt20 {
    margin-top: 6vw;
        background-color: #fff;
        position: relative;
        z-index: 9;
        border-radius: 15px 15px 0 0;
        height: 52px;
}
.mt222{
	margin-top: 6vw;
}
.tc_100 {

    width: 25vw;
    height: 25vw;
    overflow: hidden;
    border: 1vw solid #ffffff00;
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.wt80_100 {
    width: 25vw!important;
}

.tc_110 {
    padding-left: 22vw;
    padding-right: 20vw;
    align-items: center;
}
.ft16 {
    font-size: 4vw;
}
.plr10 {
    padding-left: 4vw;
    padding-right: 4vw;
}

.plr15 {
    padding-left: 4vw;
    padding-right: 4vw;
    width: 50vw;
}

uni-page-body {
    color: #8f9ada;

}

.pt30 {
    padding-top: 25vw;
}
.bgBlue {
    background: #2196F3;
}
.ft12 {
   font-size: 4vw;
}
* {

    font-size: 4vw;
}
.uni-picker-container .uni-picker-action {

    font-size: 4vw;

}
.span {

    font-size: 4vw;

}



.bg-purple {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}
.spdiao {
    height: 40px;
    background: #FFF;
    border-radius: 14px 14px 0px 0px;
    position: relative;
    top: 7vw;
}
.bgBlueui {
    background: #f7f7f7;
}


.mbwjmm {
    color: #30313369;
}


</style>
